<template>
	<view class="sapam">
		<view class="sapam-title">
			<text class="sapam-title-img"></text>
			<text class="sapam-title-txt font_blod">设置规格</text>
		</view>
		<view class="sapam-main">
			<view class="sapam-main-list" v-for="(item, index) of list" :key="index">
				<view class="sapam-main-li-close" @click="cli_close(item, index)">
					<image class="sapam-main-li-close-img"
						src="https://www.zzzsyh.com/applets/agent/agent/close_drop_2.png" mode=""></image>
				</view>

				<view class="sapam-main-li">
					<view class="sapam-main-li-top">
						<view class="sapam-main-li-top-back">
							<image @click="previewImage(item.attributeLogo)" v-if="item.attributeLogo"
								class="sapam-main-li-top-img" :src=item.attributeLogo mode=""></image>
							<image v-else @click="cli_upimg(item, index)" class="sapam-main-li-top-img"
								src="https://www.zzzsyh.com/applets/agent/agent/upimg2.png" mode=""></image>
							<image v-if="item.attributeLogo" @click="cli_closeimg(item, index)" class="sapam-img-close"
								src="https://www.zzzsyh.com/applets/agent/agent/close_drop_2.png" mode=""></image>
						</view>
						<view class="sapam-main-li-top-right">
							<view class="sapam-main-li-top-right-inputBox">
								<input v-model="item.attributeName" class="sapam-main-li-top-right-input"
									placeholder-class="inputplace" placeholder="请输入规格名称" type="text" value="" />
							</view>

						</view>
					</view>
					<view class="sapam-main-li-cen">
						<view class="sapam-main-li-cen-li">
							<view class="sapam-main-li-cen-li-left">
								<text class="sapam-main-li-cen-li-left-txt">售价</text>
								<text class="sapam-main-li-cen-li-left-txt1">:</text>
								<text class="sapam-main-li-cen-li-left-txt2">￥</text>
							</view>
							<input v-model="item.attributeSalePrice" class="sapam-main-li-cen-li-input" type="digit"
								placeholder-class="inputplace" placeholder="请输入售价" value="" />
						</view>
						<view class="sapam-main-li-cen-li">
							<view class="sapam-main-li-cen-li-left">
								<text class="sapam-main-li-cen-li-left-txt">库存数量</text>
								<text class="sapam-main-li-cen-li-left-txt1">:</text>

							</view>
							<input v-model="item.attributeStock" class="sapam-main-li-cen-li-input" type="text"
								placeholder-class="inputplace" placeholder="请输入库存数量" value="" />
						</view>
						<view class="sapam-main-li-cen-li">
							<view class="sapam-main-li-cen-li-left">
								<text class="sapam-main-li-cen-li-left-txt">规格描述</text>
								<text class="sapam-main-li-cen-li-left-txt1">:</text>

							</view>
							<input v-model="item.attributeRemarks" class="sapam-main-li-cen-li-input" type="text"
								placeholder-class="inputplace" placeholder="请输入规格描述" value="" />
						</view>
						<view class="sapam-main-li-cen-li">
							<view class="sapam-main-li-cen-li-left">
								<text class="sapam-main-li-cen-li-left-txt">包邮</text>
								<text class="sapam-main-li-cen-li-left-txt1">:</text>

							</view>
							<view class="sapam-main-li-cen-li-right">
								<switch class="sapam-main-li-cen-li-right-switch" :checked="changeChecked(item.isPost)"
									color="#28CD50" @change="switch2Change($event, item, index)" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sapam-btn font_blod">
			<view class="sapam-btn-box sapam-btn-left" @click="cli_addNew">
				新增规格
			</view>
			<view v-if="putAll" class="sapam-btn-box sapam-btn-right sapam-btn-right-ok" @click="cli_ok">
				确定
			</view>
			<view v-else class="sapam-btn-box sapam-btn-right" @click="cli_nook">
				确定
			</view>

		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				list: [{
					id: '',
					attributeLogo: '',
					attributeName: '',
					attributeSalePrice: '',
					attributeStock: '',
					attributeRemarks: '',
					isPost: '1'
				}, ],
				currentIndex: 0,
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		onShow() {
			if (this.imagePath == 'shopAddProductAddModel') {
				this.list[this.currentIndex].attributeLogo = this.imageSrc
			}

		},
		computed: {
			putAll() {
				let list = this.list
				let _that = this
				for (let i = 0; i < list.length; i++) {
					if (!list[i].attributeLogo || !list[i].attributeName || !list[i].attributeSalePrice || !list[i]
						.attributeStock || !list[i].attributeRemarks) {
						console.log('nonono');
						return false
						break
					} else {
						console.log('ojbk');
						return true
					}
				}
			},
			...mapState({
				imageSrc: state => state.image.src,
				imagePath: state => state.image.path
			})
		},
		mounted() {
			this.getAttributeListByPartsId(this.id)
		},
		methods: {
			// 图片预览
			previewImage(item, index) {
				console.log(item);
				let lis = item.split()
				wx.previewImage({
					current: 0, // 当前显示图片的http链接
					urls: lis // 需要预览的图片http链接列表
				})
			},
			// 改变包邮状态
			changeChecked(val) {
				if (val == 1) {
					return true
				} else {
					return false
				}
			},
			// 是否包邮
			switch2Change(e, item, index) {
				console.log(e);
				let val = e.target.value
				if (val) {
					item.isPost = '1'
				} else {
					item.isPost = '0'
				}
			},
			// 新增
			cli_addNew() {
				let list = this.list
				// list
				this.list.push({
					id: '',
					attributeLogo: '',
					attributeName: '',
					attributeSalePrice: '',
					attributeStock: '',
					attributeRemarks: '',
					isPost: '1'
				})
			},
			// 删除
			cli_close(item, index) {
				let list = this.list
				console.log(index);
				list.splice(index, 1)
				console.log(list);
			},
			// 点击确定
			cli_nook() {
				let list = this.list
				let _that = this
				console.log(list);
				for (let i = 0; i < list.length; i++) {
					if (!list[i].attributeLogo || !list[i].attributeName || !list[i].attributeSalePrice || !list[i]
						.attributeStock || !list[i].attributeRemarks) {
						uni.showToast({
							title: '请先完善第' + (i + 1) + '个规格信息',
							icon: 'none'
						})
						break
					} else {

					}
				}
			},
			cli_ok() {
				this.savePartsAttribute()
			},
			savePartsAttribute() {
				let partsJson = this.list
				console.log(partsJson);
				uni.request({
					url: allapi.savePartsAttribute,
					data: {
						partsId: this.id,
						partsJson: partsJson
					},
					success: (res) => {
						console.log(res);
						uni.navigateBack()
					}
				})
			},
			// 上传照片
			cli_upimg(item, index) {
				let list = this.list
				let _that = this
				this.currentIndex = index
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.navigateTo({
							url: '/pages/cutImage/cutImage?src=' + tempFilePaths[0]
						})
						this.$store.commit('image/path/UPDATE', 'shopAddProductAddModel')
					}
				});
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		uni.uploadFile({
				// 			url: allapi.upload, //仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			success: (uploadFileRes) => {
				// 				console.log(uploadFileRes.data);
				// 				let dat = uploadFileRes.data
				// 				let msg = JSON.parse(dat)
				// 				let imgurl = msg.url
				// 				console.log(msg);
				// 				_that.list[index].attributeLogo = imgurl
				// 				console.log(_that.list);
				// 			}
				// 		});
				// 	}
				// });
			},
			// 删除图片
			cli_closeimg(item, index) {
				let list = this.list
				list[index].attributeLogo = ''
			},
			// 根据id 获取产品
			getAttributeListByPartsId(id) {
				uni.request({
					url: allapi.getAttributeListByPartsId,
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let listfile = dat.filter((item) => {
							return {
								id: item.id,
								attributeLogo: item.attributeLogo,
								attributeName: item.attributeName,
								attributeSalePrice: item.attributeSalePrice,
								attributeStock: item.attributeStock,
								attributeRemarks: item.attributeRemarks,
							}
						})
						if (listfile.length > 0) {
							this.list = listfile
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.sapam {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.sapam-title {
		display: flex;
		align-items: center;
		line-height: 44rpx;
		margin: 26rpx 24rpx;
	}

	.sapam-title-img {
		width: 10rpx;
		height: 34rpx;
		background: #58D26F;
		border-radius: 5rpx;
	}

	.sapam-title-txt {
		font-size: 32rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.sapam-main {
		flex: 1;
		overflow: auto;
	}

	.sapam-main-list {
		display: flex;
	}

	.sapam-main-li {
		margin: 26rpx 24rpx;
		background: #FFFFFF;
		padding: 24rpx;
		border-radius: 16rpx;
		flex: 1;
	}

	.sapam-main-li-close {
		margin-top: 58rpx;
		margin-left: 32rpx;
	}

	.sapam-main-li-close-img {
		width: 48rpx;
		height: 48rpx;
	}

	.sapam-main-li-top-back {
		width: 100rpx;
		height: 100rpx;
		position: relative;
	}

	.sapam-img-close {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		right: -10rpx;
		top: -10rpx;
	}

	.sapam-main-li-top {
		display: flex;
	}

	.sapam-main-li-top-img {
		width: 100rpx;
		height: 100rpx;
	}

	.sapam-main-li-top-right {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}

	.sapam-main-li-top-right-inputBox {
		width: 100%;
		height: 64rpx;
		background: #f3f5f6;
		display: flex;
		align-items: center;
		border-radius: 12rpx;
	}

	.sapam-main-li-top-right-input {

		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 6rpx;
	}

	.sapam-main-li-cen {
		margin-left: 124rpx;
	}

	.sapam-main-li-cen-li {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

	}

	.sapam-main-li-cen-li:last-child {
		margin-bottom: 0;
	}

	.sapam-main-li-cen-li-left {
		width: 140rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.sapam-main-li-cen-li-left-txt {
		width: 100rpx;
		text-align: justify;
		text-align-last: justify;
	}

	.sapam-main-li-cen-li-left-txt1 {
		margin-left: 5rpx;
	}

	.sapam-main-li-cen-li-left-txt2 {
		margin: 0 5rpx;
	}

	.sapam-main-li-cen-li-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.sapam-main-li-cen-li-right-switch {
		scale: 0.5
	}

	.sapam-main-li-cen-li-input {
		width: 232rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #F3F5F6;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		padding: 0 10rpx;
		flex: 1;
	}


	.sapam-btn {
		min-height: 120rpx;
		background: #FFFFFF;
		/* opacity: 0.6; */
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
	}

	.sapam-btn-box {
		width: 296rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #F3F5F6;
		border-radius: 44rpx;
		font-size: 32rpx;
	}

	.sapam-btn-left {
		color: #333333;
		background: #F3F5F6;
	}

	.sapam-btn-right {
		color: #FFFFFF;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		opacity: 0.6;
	}

	.sapam-btn-right-ok {
		opacity: 1;
	}
</style>
